{% extends 'base_page.html' %}

{% block title %}
    数据删除
{% endblock %}



{% block  nav %}
    <nav class="iq-sidebar-menu">
                    <ul id="iq-sidebar-toggle" class="side-menu">
                        <li class="px-3 pt-3 pb-2 ">
                            <span class="text-uppercase small font-weight-bold">首页</span>
                        </li>
                        <li class=" sidebar-layout">
                            <a href="/page/home" class="svg-icon">
                                <i class="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                         stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                                    </svg>
                                </i>
                                <span class="ml-2">首页</span>
                            </a>
                        </li>
                        <li class=" sidebar-layout">
                            <a href="/page/articleData" class="svg-icon">
                                <i class="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                         stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                                    </svg>
                                </i>
                                <span class="ml-2">微博文章</span>
                            </a>
                        </li>
                        <li class=" sidebar-layout">
                            <a href="/page/commentsData" class="svg-icon">
                                <i class="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                         stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M17,16V3L13,5,10,3,7,5,3,3V17.83A3.13,3.13,0,0,0,5.84,21,3,3,0,0,0,9,18V17a1,1,0,0,1,1-1H20a1,1,0,0,1,1,1v1a3,3,0,0,1-3,3H6"></path>
                                    </svg>
                                </i>
                                <span class="ml-2">微博评论</span>
                            </a>
                        </li>
                        <li class=" sidebar-layout">
                            <a href="/page/topic" class="svg-icon">
                                <i class="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                         stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                                    </svg>
                                </i>
                                <span class="ml-2">微博热门话题</span>
                            </a>
                        </li>
                        <li class="px-3 pt-3 pb-2 ">
                            <span class="text-uppercase small font-weight-bold">数据分析</span>
                        </li>
                        <li class=" sidebar-layout">
                            <a href="/page/articleChar" class="svg-icon">
                                <i class="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                         stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"></path>
                                    </svg>
                                </i>
                                <span class="ml-2">文章分析</span>
                            </a>
                        </li>
                        <li class=" sidebar-layout">
                            <a href="/page/yuqingChar" class="svg-icon">
                                <i class="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                         stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                    </svg>
                                </i>
                                <span class="ml-2">分析</span>
                            </a>
                        </li>
                        <li class=" sidebar-layout">
                            <a href="/page/analysisTopic" class="svg-icon">
                                <i class="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                         stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                                    </svg>
                                </i>
                                <span class="ml-2">热门话题分析</span>
                            </a>
                        </li>
                        <li class="px-3 pt-3 pb-2">
                            <span class="text-uppercase small font-weight-bold">数据管理</span>
                        </li>
                        <li class=" sidebar-layout">
                            <a href="/page/spiderData" class="svg-icon">
                                <i class="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                         stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                                    </svg>
                                </i><span class="ml-2">爬取数据</span>
                            </a>
                        </li>
                        <li class=" sidebar-layout">
                            <a href="/page/articleData_temp" class="svg-icon">
                                <i class="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                         stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                                    </svg>
                                </i><span class="ml-2">爬取结果</span>
                            </a>
                        </li>
                        <li class=" sidebar-layout">
                            <a href="/page/updateData" class="svg-icon">
                                <i class="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                         stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"></path>
                                    </svg>
                                </i><span class="ml-2">文章数据更新</span>
                            </a>
                        </li>
                        <li class="active sidebar-layout">
                            <a href="/page/deleteData" class="svg-icon">
                                <i class="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                         stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
                                    </svg>
                                </i><span class="ml-2">数据删除</span>
                            </a>
                        </li>
                    </ul>
                </nav>
{% endblock %}




{% block content %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 mb-4 mt-1">
                <div class="d-flex flex-wrap justify-content-between align-items-center">
                    <h4 class="font-weight-bold">微博文章</h4>
                    <button id="delete-all" class="btn btn-danger">删除所有</button>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <div id="datatable-1_wrapper" class="dataTables_wrapper dt-bootstrap4">
                                <div class="row">
                                    <table id="datatable-1"
                                           class="table data-table table-striped table-bordered dataTable" role="grid"
                                           aria-describedby="datatable-1_info">
                                        <thead>
                                        <tr>
                                            <th>
                                                <input type="checkbox" id="selectAll">
                                            </th>
                                            <th style="font-weight: bold">文章ID</th>
                                            <th style="font-weight: bold">点赞量</th>
                                            <th style="font-weight: bold">转发量</th>
                                            <th style="font-weight: bold">评论量</th>
                                            <th style="font-weight: bold">类型</th>
                                            <th style="font-weight: bold">内容</th>
                                            <th style="font-weight: bold">发布时间</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for article in articeList %}
                                            <tr class="even">
                                                <td>
                                                    <input type="checkbox" class="article-checkbox"
                                                           value="{{ article[0] }}">
                                                </td>
                                                <td style="width:150px" class="sorting_1">
                                                    <a href="{{ article[8] }}" target="_blank">{{ article[0] }}</a>
                                                </td>
                                                <td style="width:70px">👍{{ article[1] }}</td>
                                                <td style="width:70px">🥇{{ article[3] }}</td>
                                                <td style="width:70px">🔥{{ article[2] }}</td>
                                                <td style="width:50px" class="text-right">{{ article[7] }}</td>
                                                <td style="width:300px" class="text-right">
                                                    {% if article[5]|length > 100 %}
                                                        {{ article[5][:100] }}......
                                                    {% else %}
                                                        {{ article[5] }}
                                                    {% endif %}
                                                </td>
                                                <td style="width:100px" class="text-right">{{ article[6] }}</td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <button id="delete-selected" class="btn btn-danger">删除选中</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        var selectedIds = new Set();

        $(document).ready(function () {
            // 全选复选框事件
            $('#selectAll').click(function () {
                var isChecked = this.checked;
                $('.article-checkbox').each(function () {
                    $(this).prop('checked', isChecked);
                    if (isChecked) {
                        selectedIds.add($(this).val());
                    } else {
                        selectedIds.delete($(this).val());
                    }
                });
            });

            // 单个文章复选框事件
            $('.article-checkbox').click(function () {
                var articleId = $(this).val();
                if (this.checked) {
                    selectedIds.add(articleId);
                } else {
                    selectedIds.delete(articleId);
                }

                // 更新全选复选框的状态
                if ($('.article-checkbox:checked').length === $('.article-checkbox').length) {
                    $('#selectAll').prop('checked', true);
                } else {
                    $('#selectAll').prop('checked', false);
                }
            });

            // 删除按钮点击事件
            $('#delete-selected').click(function () {
                if (selectedIds.size > 0) {
                    var idsArray = Array.from(selectedIds);
                    console.log(idsArray);

                    // 将选中的ID传送到后端
                    $.ajax({
                        type: 'POST',
                        url: '/page/delete_articles', // 后端接收数据的URL
                        data: JSON.stringify({articleIds: idsArray}),
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        success: function (response) {
                            console.log(response);
                            // 可以在这里添加成功后的处理
                            alert('选中的文章已删除');
                            location.reload(); // 刷新页面
                        },
                        error: function (error) {
                            console.log(error);
                            // 可以在这里添加失败后的处理
                            alert('删除文章时出错');
                        }
                    });
                } else {
                    alert('请选择要删除的文章');
                }
            });

            $('#delete-all').click(function () {
                if (confirm('确定要删除所有文章吗？')) {
                    $.ajax({
                        url: '/page/delete_all_articles',
                        type: 'POST',
                        success: function (response) {
                            alert(response.message);
                            location.reload();
                        },
                        error: function (xhr) {
                            alert('删除失败: ' + xhr.responseJSON.message);
                        }
                    });
                }
            });
        });
    </script>


{% endblock %}



{% block echarts %}
    <script>

    </script>
{% endblock %}